<template>
  <div class="flex flex-col h-full overflow-hidden">
    <a-card class="header-card" :body-style="{ padding: '8px' }">
      <div class="w-full flex-between">
        <!-- <span class="w-80"></span> -->
        <a-radio-group v-model:value="tabsKey" button-style="solid" @change="onChangeTabs">
          <a-radio-button :value="7">我的病人 ({{ statusCount.yshz || 0 }})</a-radio-button>
          <a-radio-button :value="0">在区 ({{ statusCount.zy || 0 }})</a-radio-button>
          <a-radio-button :value="5">待出区 ({{ statusCount.dcq || 0 }})</a-radio-button>
          <a-radio-button :value="6">已出区 ({{ statusCount.ycq || 0 }})</a-radio-button>
          <a-radio-button :value="2">待出院 ({{ statusCount.dcy || 0 }})</a-radio-button>
          <a-radio-button :value="1">已出院 ({{ statusCount.ycy || 0 }})</a-radio-button>
        </a-radio-group>
        <div class="flex">
          <SelectTable
            v-if="store.tabsKey === 0"
            v-model:value="wardDoctorName"
            placeholder="请选择值班医生"
            class="w-48 mr-2"
            type="医生"
            @select="onSetWardDoctor"
            @input-change="onInputChange"
          />
          <SelectArea class="w-48 mr-2" use-cache set-cache @change="onChangeArea" />
          <a-radio-group v-if="[0, 7].includes(tabsKey)" v-model:value="showType" @change="onChangeShowType">
            <a-tooltip title="列表模式" placement="bottom">
              <a-radio-button :value="1"><BarsOutlined /></a-radio-button>
            </a-tooltip>
            <a-tooltip title="卡片模式" placement="bottom">
              <a-radio-button :value="2"><AppstoreOutlined /></a-radio-button>
            </a-tooltip>
          </a-radio-group>
        </div>
      </div>
    </a-card>
    <a-card :key="dataKey" class="mt-2 flex-1 overflow-hidden" :body-style="{ padding: '0', height: '100%', display: 'flex', flexDirection: 'column' }">
      <!-- 在区 -->
      <InArea v-if="tabsKey === 0" />
      <!-- 我的病人 -->
      <MyPatient v-if="tabsKey === 7" />
      <!-- 待出区 -->
      <WaitOutArea v-if="tabsKey === 5" />
      <!-- 已出区 -->
      <DoneOutArea v-else-if="tabsKey === 6" />
      <!-- 待出院 -->
      <WaitOutHospital v-else-if="tabsKey === 2" />
      <!-- 已出院 -->
      <DoneOutHospital v-else-if="tabsKey === 1" />
    </a-card>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons-vue'
import SelectArea from '@/components/SelectArea'
import { post } from '@/utils/request'
import useStore from './store'
import InArea from './components/InArea'
import MyPatient from './components/MyPatient'
import WaitOutArea from './components/WaitOutArea'
import DoneOutArea from './components/DoneOutArea'
import WaitOutHospital from './components/WaitOutHospital'
import DoneOutHospital from './components/DoneOutHospital'

const dataKey = ref(Math.random())
const router = useRouter()
// const route = useRoute()
const store = useStore()
const showType = ref(1)
const statusCount = ref({})
const tabsKey = ref(7)

//获取各状态人数
const getStatusCount = async () => {
  store.tabsKey = tabsKey.value
  const { code, data } = await post('/inp/zydj/getPatientCountBylnpStatus', {
    bqbh: store.areaCode
  })
  if (code === 0) {
    statusCount.value = data
  }
}
//切换Tab标签
const onChangeTabs = () => {
  router.push({
    path: '/in-doctor/bed-card',
    query: {
      tab: tabsKey.value
    }
  })
  getStatusCount()
  showType.value = 1
  store.insiedShowType = 1 // 在区 显示类型 1:列表 2:床位卡
  store.tabMyPatientShowType = 1 // 在区 显示类型 1:列表 2:床位卡,
  store.cardSwitch = false
}
onMounted(() => {
  if (tabsKey.value === 0) {
    showType.value = store.insiedShowType
  }
  if (tabsKey.value === 7) {
    showType.value = store.tabMyPatientShowType
    store.cardSwitch = false
  }
})
//切换显示类型 1列表/2卡片
const onChangeShowType = () => {
  dataKey.value = Math.random()
  if (tabsKey.value === 0) {
    store.insiedShowType = showType.value
  }
  if (tabsKey.value === 7) {
    store.tabMyPatientShowType = showType.value
  }
}
//切换病区
const onChangeArea = (val, _, isFirst) => {
  store.areaCode = val
  !isFirst && (dataKey.value = Math.random())
  getStatusCount()
  onGetWardDoctor()
}
const wardDoctorName = ref('')
const onGetWardDoctor = async () => {
  const { code, msg, data } = await post('/inp/zyhs/chooseDutyDoctor', {
    wardId: store.areaCode
  })
  if (code !== 0) return message.error(msg)
  wardDoctorName.value = data?.dutyDoctorName || ''
}
const onSetWardDoctor = async (empInfo) => {
  const { code, msg } = await post('/inp/zyhs/chooseDutyDoctor', {
    wardId: store.areaCode,
    dutyDoctorEmpId: empInfo.empId || ''
  })
  if (code !== 0) return message.error(msg)
  message.success(msg || '操作成功')
  onGetWardDoctor()
}
const onInputChange = (empInfo) => {
  if (!empInfo) {
    onSetWardDoctor(empInfo)
  }
}
// onMounted(() => {
// tabsKey.value = +route.query?.tab || 0
// })
</script>
